package widget

import "html/template"

var uploadImage = `
<style type="text/css">
	.layui-upload-drag {
	    position: relative;
	    padding: 10px;
	    border: 1px dashed #e2e2e2;
	    background-color: #fff;
	    text-align: center;
	    cursor: pointer;
	    color: #999;
	}
</style>
<div class="layui-input-block">
	<div class="layui-upload-drag"><img id="site_logo__upimage_show_id" src="http://images.beego.layui.easygoadmin.vip/images/config/20220512/b0e0f4cc-f5e7-4800-adff-f3e615197731.png" alt="上传头像" width="90" height="90"><input type="hidden" id="site_logo__upimage" name="site_logo__upimage" value="http://images.beego.layui.easygoadmin.vip/images/config/20220512/b0e0f4cc-f5e7-4800-adff-f3e615197731.png">
	</div>
	<div style="margin-top:10px;">
		<button type="button" class="layui-btn" id="upload_site_logo__upimage"><i class="layui-icon"></i>上传头像</button><input class="layui-upload-file" type="file" accept="image/*" name="file">
	</div><div class="layui-form-mid layui-word-aux">建议尺寸：建议上传尺寸450x450</div></div>
<script type="text/javascript">
layui.use(['upload','croppers'],function(){
	//声明变量
	var layer = layui.layer
	,upload = layui.upload
	,croppers = layui.croppers
	,$ = layui.$;
	
	if(2==1) {
		//图片裁剪组件
	    croppers.render({
	        elem: '#upload_site_logo__upimage'
	        ,name:"site_logo__upimage"
	        ,saveW:300     //保存宽度
	        ,saveH:300
	        ,mark:1    //选取比例
	        ,area:['750px','500px']  //弹窗宽度
	        ,url: "/upload/uploadImage"
	        ,done: function(url){ 
	        	//上传完毕回调
	            $('#site_logo__upimage').val(url);
	            $('#site_logo__upimage_show_id').attr('src',url);
	        }
	    });
		
	}else{
		/**
		 * 普通图片上传
		 */
		var uploadInst = upload.render({
		    elem: '#upload_site_logo__upimage'
			,url: "/upload/uploadImage"
			,accept:'images'
			,acceptMime:'image/*'
			,exts: "jpg|png|gif|bmp|jpeg"
			,field:'file'//文件域字段名
			,size: 10240 //最大允许上传的文件大小
			,before: function(obj){
				//预读本地文件
			}
			,done: function(res){
				//上传完毕回调
				
				if(res.code != 0){
					layer.msg(res.msg,{ icon: 5 });
					return false;
				}

				//上传成功
				$('#site_logo__upimage_show_id').attr('src', res.data.fileUrl);
	    		$('#site_logo__upimage').val(res.data.fileUrl);
			}
			,error: function(){
				//请求异常回调
				return layer.msg('数据请求异常');
			}
		});
		
	}
	
});
</script>
`

func UploadImage() template.HTML {
	return template.HTML(uploadImage)
}
